<!--
 * @Description: mark
 * @Author: wangwangwang
 * @Date: 2020-07-23 09:33:47
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-04-08 10:01:13
--> 
<template>
	<section>
		<el-dialog v-dialogDrag :visible.sync="copyVisible" width="40%" :before-close="handleClose" @open="onOpen">
			<span slot="title">选择抄送人</span>
			<div class="dialoginfo copyPeople" style="border:0">
				<div>
					<el-form ref="form" label-position="left" :model="form" label-width="120px">
						<el-form-item label-width="0">
							<el-button class="bottom_all" style="margin: 0;" size="medium" @click="addSubmit()">添加成员</el-button>
						</el-form-item>
						<el-form-item v-show="choisedPersonData.length" label="已添加：">
							<el-tag v-for="item in choisedPersonData" :key="item.id" class="person-tag" closable :disable-transitions="false" @close="closeTag(item)">
								{{item.name}}
							</el-tag>
						</el-form-item>
						<el-form-item label="筛选类型：">
							<el-select v-model="filterType" placeholder="请选择">
								<el-option label="交集" value="1"></el-option>
								<el-option label="并集" value="2"></el-option>
							</el-select>
							<span v-show="filterType=='2'" class="text">已添加人员均作为抄送人</span>
							<span v-show="filterType=='1'" class="text">添加的人员交集作为抄送人</span>
						</el-form-item>
						<el-form-item label-width="0">
							<el-button class="bottom_all_two" style="margin: 0;" size="medium" @click="addpersonDialog = true">预览抄送人</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button class="bottom_all_two" size="medium" @click="handleClose">取 消</el-button>
				<el-button class="bottom_all" size="medium" @click="handleSure">确 定</el-button>
			</span>
		</el-dialog>
		<personModel :visible='visible' @closeModel='closeModel' @getPerson='setSendPerson' />
	</section>
</template>

<script>
import personModel from '@/components/ChoisePerson/personModel';
export default {
	props: ['copyVisible','copyEditData'],
	components: {
		personModel,
	},
	data() {
		return {
			form: {},
			visible: false,
			choisedPersonData: [],
			filterType: '1',
		}
	},
	methods: {
		onOpen() {
			this.choisedPersonData = this.copyEditData.choisedPersonData || [];
		},
		handleClose() {
			this.$emit('closeVisible');
		},
		handleSure() {
			if (!this.choisedPersonData.length) {
				this.$message({
					type: 'warning',
					message: '请选择抄送人后再提交'
				})
				return
			}
			const data = {
				filterType: this.filterType,
				choisedPersonData: this.choisedPersonData,
			}
			this.$emit('sendCopyData', data);
		},
		closeTag(data) {
			this.choisedPersonData.splice(this.choisedPersonData.indexOf(data), 1);
		},
		closeModel() {
			this.visible = false;
		},
		setSendPerson(data) {
			this.choisedPersonData = data;
			this.visible = false;
		},
		addSubmit() {
			this.visible = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.text {
  margin-left: 10px;
}
.person-tag {
  margin-left: 10px;
  background: $bg_color;
  color: #fff;
}
</style>
